<template>
    <main class="page">
        <!-- 浏览内容切换开关 -->
        <el-switch
            v-model="defaultOption"
            active-text="Complexes"
            inactive-text="Ligands"
            size="large"
        />
        <!-- 缓存动态列表组件 -->
        <KeepAlive>
            <component :is="defaultOption?ComplexList:LigandList"/>
        </KeepAlive>
    </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 导入复合物列表组件
import ComplexList from '../components/ComplexList.vue';
// 导入配体列表组件
import LigandList from '../components/LigandList.vue';

// 初始化显示项状态
const defaultOption=ref(true);
// 数据更新时重新渲染页面
window.electronAPI.onUpdate((_event:Event)=>{
    defaultOption.value=!!defaultOption.value;
});
</script>

<style lang="scss" scoped>
/* 页面布局样式 */
.page{
    display:flex;
    flex-direction: column;
    align-items: center;
    height:85vh;
    background-color: transparentize($color: grey, $amount: 0.15);
}
</style>
